// 头部组件样式文件
.header-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 999;
  .active {
    border-bottom: 4px solid rgb(58, 200, 236);
  }
  // 设置2行都为 白色背景
  .ant-row {
    background-color: #fff;
  }
  // 正常行
  .full {
    .ant-col {
      height: 77px;
    }
    // logo
    .logo-text {
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 3rem;
    }
    // nav
    .nav {
      ul {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;
        font-size: 1.2rem;
        letter-spacing: 0.2rem;
        li {
          margin: 0 1.5rem;
          height: 100%;
          line-height: 77px;
        }
      }
    }
    // 操作
    .operation {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      i {
        font-size: 2.5rem;
        cursor: pointer;
      }
      // 用户头像
      .user-img {
        width: 3.5rem;
        height: 3.5rem;
        margin-left: 2.5rem;
        background: rgb(55, 181, 172);
        border-radius: 50%;
      }
    }
  }
  // 汉堡行
  .hamburger {
    height: 4rem;
    position: relative;
    .logo-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2rem;
    }
    // 汉堡按钮
    .menu-outlined {
      position: absolute;
      top: 0;
      right: 1rem;
      font-size: 1.5rem;
      line-height: 4rem;
    }

  }
}


// 媒体查询，将 汉堡按钮行 > 1200 时，隐藏
@media screen and (min-width: 1200px) {
  .header-content {
    .hamburger {
      display: none;
    }
  }
}

// xs: <576px响应式栅格。
// sm：≥576px响应式栅格.
// md: ≥768px响应式栅格.
// lg: ≥992px响应式栅格.
// xl: ≥1200px响应式栅格.
// xxl: ≥1600px响应式栅格.